import React, { Component } from "react";
import Activity from "../components/ThemeAd/Activity";
import styles from "./ThemeAd.module.scss";
import api from "../serve/api";
import { withRouter } from "react-router-dom";

class FocusNews extends Component {
  constructor(props) {
    super(props);
    this.state = {
      select: 0,
      tabs: [],
      news: [],
      themeAd: {},
      total: "",
      page: 1,
      typeId: ""
    };
  }

  componentDidMount() {
    this.getThemeAdTypes();
  }

  async getThemeAdTypes() {
    let { match } = this.props;
    let id = match.params.id;
    const data = await api.getAdTypeByParentId({ id: id });
    if (data && data.code === "000000") {
      this.setState({
        tabs: data.result || []
      });
    }
    const themeAd = await api.getAdTypeById({ id: id });
    if (themeAd && themeAd.code === "000000") {
      this.setState({
        themeAd: themeAd.result || {}
      });
    }
  }

  scrollToAnchor = id => {
    let anchorName = "aaa" + id;
    if (anchorName) {
      let anchorElement = document.getElementById(anchorName);
      if (anchorElement) {
        anchorElement.scrollIntoView();
      }
    }
  };

  render() {
    const { tabs, themeAd, select, news, total, page, nowNews } = this.state;
    console.log("theme", themeAd);
    return (
      <div className={styles.container}>
        <div>
          <div>
            <img src={themeAd.img_url} alt="" width="100%" height="120px" />
          </div>
          <div className={styles.remark}>{themeAd.remark}</div>
        </div>
        <div className={styles.flexbox}>
          {tabs.map((item, index) => {
            return (
              <div className={styles.block}>
                <a onClick={() => this.scrollToAnchor(item.id)}>{item.name}</a>
              </div>
            );
          })}
        </div>
        <Activity datas={tabs} />
      </div>
    );
  }
}
export default withRouter(FocusNews);
